import { View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useStore, useSelector, RootStateOrAny } from "react-redux";
import classNames from "classnames";
import "./index.scss";

import { setTabbar } from "../store/actions";

function CustomTabBar() {
  //   const url = "../assets/images/tabbar/home.png";
  const store = useStore();
  // const safeHeight: number = state.safeArea.safeHeight;
  const safeHeight: number = useSelector(
    (state: RootStateOrAny) => state.safeArea.safeHeight
  );
  // tabbar的值
  const currentTabbar: string = useSelector(
    (state: RootStateOrAny) => state.tabbar.current
  );

  const tabbarIcons = {
    home: require("../assets/images/tabbar/home.png"),
    homeActive: require("../assets/images/tabbar/home_active.png"),
    my: require("../assets/images/tabbar/my.png"),
    myActive: require("../assets/images/tabbar/my_active.png"),
    centerIcon: require("../assets/images/tabbar/xian.png"),
  };
  const tabbarBg = require("../assets/images/tabbar/tabbar_bg.png");
  // const [activeTab, setActiveTab] = useState("home");
  function tabClick(type: string) {
    if (type === "home") {
      Taro.switchTab({ url: "/pages/index/index" });
    } else if (type === "my") {
      Taro.switchTab({ url: "/pages/my/index" });
    } else {
      Taro.navigateTo({ url: "/pages/publish/index" });
    }
    store.dispatch(setTabbar(type));
  }

  return (
    <View className="tabbar">
      <View className="bottom-tab">
        <Image
          className="bottom-tab--bg"
          mode="widthFix"
          src={tabbarBg}
        ></Image>
        <View className="bottom-tab__item" onClick={() => tabClick("home")}>
          <Image
            src={
              currentTabbar === "home"
                ? tabbarIcons.homeActive
                : tabbarIcons.home
            }
            className="bottom-tab__item--icon"
          ></Image>
          <View
            className={classNames("bottom-tab__item--text", {
              "bottom-tab__item--text-active": currentTabbar === "home",
            })}
          >
            主页
          </View>
        </View>
        <View className="content__center" onClick={() => tabClick("publish")}>
          <View className="content__center__block">
            <Image
              className="content__center__block--icon"
              src={tabbarIcons.centerIcon}
            ></Image>
          </View>
        </View>
        <View className="bottom-tab__item" onClick={() => tabClick("my")}>
          <Image
            src={currentTabbar === "my" ? tabbarIcons.myActive : tabbarIcons.my}
            className="bottom-tab__item--icon"
          ></Image>
          <View
            className={classNames("bottom-tab__item--text", {
              "bottom-tab__item--text-active": currentTabbar === "my",
            })}
          >
            我的
          </View>
        </View>
      </View>
      {/* 安全区 */}
      <View
        className="bottom-safe"
        style={`height:` + safeHeight + "px"}
      ></View>
    </View>
  );
}

export default CustomTabBar;
